<template>
    <ul class="cjy-recommend"
        style=" width: 100%;padding:0 0.75rem ;float: left;display:block ;min-width: 100%;position: relative">
      <li
        style="width: 49.9%; float:left ;border-bottom: 1px solid rgb(234, 234, 234);padding-bottom: 0.5rem;padding-top: 0.5rem"
        v-for="(val,index) in showList"
        :key="index" @click='jumpEvent(val)'>
        <div
          style="margin:0; height:100%; width:100%;padding:0;position:relative;display: block;">
          <div style=" width:100%;height:0;position: relative;padding-bottom:100%;overflow:hidden">
            <img
              style="width:100%;height:100%;display: inline-block;margin: 0;position: absolute;left:0; top:50%; transform: translatey(-50%)"
              v-lazy="val.mainPic || 'static/image/demo2.png'"/>
          </div>
          <h3 class="cjy-text-overflow" style="text-align: left ;font-size: 0.7rem;margin: 0;">
            {{val.goodsName ? val.goodsName : "&nbsp"}}</h3>
          <p class="cjy-text-overflow" style="font-size: 0.6rem;height: 1rem;">{{val.subTitle}}</p>
          <p style="height: 1.5rem; padding-top: 0.2rem;">
              <span class="recommendLable" v-if="val.goodsDeliveryType"
                    style="color:#6B6B6B ;border-color:#6B6B6B">次日达</span>
          </p>

          <p style="text-align: left ;padding:0">
            <span class="prices_text" style="font-size: 0.7rem; font-weight: normal;
">¥{{val.showWsPrice ? parseFloat(val.showWsPrice).toFixed(2) : "0.00"}}
            </span>
            <span v-if="val.goodsUnit"
                  style="font-size: 0.6rem ;display: inline-block">/{{val.showUnit}}</span>
          </p>

          <div v-if="showUpdate" style="position:absolute;right: 0.3rem;bottom: 0.3rem;width: 1rem;height: 1rem">
            <updata-cart :addCartButtonType="2.2"
                         :goodsId="parseInt(val.goodsId)"
                         :commodityInfor="val">
            </updata-cart>
            <!-- <div data-v-5f083100="" style="position: absolute; right: 0.3rem; bottom: 0; width: 1rem; height: 1rem;">
               <div data-v-5f083100="">
                 <div data-v-885e6e16="" class="addToCart">
                  <div data-v-885e6e16="" style="position: relative; width: 1.2rem; height: 1.2rem;">
                    <i data-v-885e6e16="" class="icon njfont nj-jiagouwuche cjy-center  cjy-animateDeleay"
                       style="font-size: 1.5rem; color:#EF5423"></i>
                  </div>
                </div>
              </div>
            </div>-->
          </div>

        </div>
      </li>

      <li v-if="routerWay" style=" width: 1rem!important;height: 100%;">
      </li>

    </ul>

</template>

<script>
  import {mapGetters, mapMutations} from "vuex";
  import Banner from '../BannerScroll'
  import UpdataCart from '@/components/UpdateCart'
  import {translateDetailData} from '@/utils/TranslateDetailDate'

  export default {
    props: {
      goodsList: {
        type: Array,
        default: () => []
      },
      routerWay: {
        type: Object,
        default: null
      },
      showUpdate: {
        type: Boolean,
        default: true

      }
    },
    data() {
      return {
        top: 0,
        isLowVersion: false,
      }
    },
    components: {
      Banner,
      UpdataCart
    },
    computed: {
      ...mapGetters('xxy', [
        "getscrollTop",
        "getstoptouch"
      ]),
      showList() {
        var goodsList = this.goodsList
        var showList = goodsList.map((item) => {
          return translateDetailData(item)
        })
        return showList

      },
    },
    methods: {
      ...mapMutations('xxy', [
        "setscrollTop",
        "setstoptouch"
      ]),
      jumpEvent(item) {
          this.$router.replace({
            name: 'detail', query:{code:(item.goodsNo || item.goodsCode)}
          })

      },
      checkTouchStart(e) {
        this.setstoptouch(false)
        this.touchStartObj = {
          pageX: e.touches[0].pageX,
          pageY: e.touches[0].pageY
        }
      },
      checkTouchEnd(e) {
      }
    },
    created() {
      var phoneInfo = window.navigator.userAgent
      var reg = /iphone*/gi;
      if (reg.test(phoneInfo)) {
      }

    },
    mounted() {
      console.log(this.showList, "showList");
    }
  }
</script>

<style scoped>
  .cjy-recommend li:nth-child(2n+1) {
    padding-right: 0.75rem;

  }

  .cjy-recommend li:nth-child(2n) {
    padding-left: 0.75rem;

  }

  .cjy-recommend p, .cjy-recommend h2 {
    padding: 0;
    text-align: left;
  }

  .cjy-more {
    height: 100% !important;
    width: 2rem !important;
    padding: 0 0 0 0;
    vertical-align: middle;
    text-align: center;
    position: absolute;
    right: 0;
  }

  .cjy-text-box {
    width: 1.2rem;
    height: 4.5rem;
    position: absolute;
    right: 0;
    top: 40%;
    transform: translatey(-50%);
    font-size: 0.7rem;
    color: #a0a0a0;
    line-height: 0.8rem;
    border-radius: 1rem 0 0 1rem;
    background: rgb(234, 234, 234);
    opacity: 0.5
  }

  .cjy-text-center {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 0.6rem;
    transform: translate(-50%, -50%);
  }

  .cjy-text-overflow {
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    white-space: nowrap;
  }

  .recommendLable {
    display: inline-block;
    font-size: 0.6rem;
    border: 1px solid rgb(232, 78, 0);
    border-radius: 0.1rem;
    padding: 0 0.2rem;
    line-height: 0.8rem;
    color: rgb(232, 78, 0)
  }

</style>
